<template>
  <div>
    <div class="gotop" @click="gotop" v-show="top">TOP</div>
  </div>
</template>

<script>
export default {
  name: "Gotop",
  data() {
    return {
      top: false,
    };
  },
  methods: {
    gotop() {
      scrollTo({ left: 0, top: 0, behavior: "smooth" });
    },
    scrollToTop() {
      var a = window.pageYOffset;

      if (a >= 395) {
        this.top = true;
      } else {
        this.top = false;
      }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.scrollToTop);
  },
};
</script>

<style scoped>
.gotop {
  position: fixed;
  width: 43px;
  height: 43px;
  right: 115px;
  bottom: 15px;

  border-radius: 10px;
  text-align: center;
  line-height: 43px;
  cursor: pointer;
  background-color: #ccc;
  transition: all .5s;
}
.gotop:hover {
  width: 50px;
  height: 50px;
  line-height: 50px;
  transition: all 0.5s;
}
</style>
